<template>
  <el-card>
    <template v-slot:header>
      <h1 class="card-title">更新用户</h1>
    </template>

    <el-form
      label-width="80px"
      class="update-user-form"
      :rules="rules"
      :model="user"
      ref="updateUserForm"
    >
      <el-form-item label="用户名">
        <el-input :value="user.username" disabled />
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="user.nickname" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="user.password" />
      </el-form-item>
      <el-form-item label="确认密码" prop="rePassword">
        <el-input type="password" v-model="user.rePassword" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <router-link to="/user"><el-button>取消</el-button></router-link>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { reqGetUser, reqUpdateUser } from "../../../api/users";

export default {
  name: "UpdateUser",
  data() {
    return {
      user: {
        id: "",
        username: "",
        nickname: "",
        password: "",
        rePassword: "",
      },
      rules: {
        nickname: [
          {
            validator: this.validator,
          },
        ],
        password: [
          {
            validator: this.validator,
          },
        ],
        rePassword: [
          {
            validator: this.validator,
          },
        ],
      },
    };
  },
  async mounted() {
    const response = await reqGetUser(this.$route.params.id);
    const { id, username, nickname } = response.data;
    this.user.id = id;
    this.user.username = username;
    this.user.nickname = nickname;
  },
  methods: {
    validator(rule, value, callback) {
      const fieldName = rule.field;
      if (fieldName === "nickname") {
        if (!/^[a-zA-Z0-9_]{2,16}$/.test(value)) {
          callback("用户昵称只能包含英文、数字和下划线，长度为2-16位");
          return;
        }
      } else if (fieldName === "password") {
        if (!/^[a-zA-Z0-9_]{4,16}$/.test(value)) {
          callback("密码只能包含英文、数字和下划线，长度为4-16位");
          return;
        }
      } else {
        if (this.user.password !== value) {
          callback("两次密码输入不一致");
          return;
        }
      }

      callback();
    },
    submit() {
      this.$refs.updateUserForm.validate(async (valid) => {
        if (valid) {
          try {
            // 表单校验成功
            const { id, nickname, password } = this.user;
            await reqUpdateUser({ id, nickname, password });
            this.$router.history.push("/user");
            this.$message({
              type: "success",
              message: "更新用户成功~",
            });
          } catch (e) {
            this.$message({
              type: "error",
              message: "更新用户失败~",
            });
          }
        }
      });
    },
  },
};
</script>

<style>
.update-user-form {
  width: 400px;
}
</style>